<template>
  <div class="m-bott">
     
    <!-- 分类 -->
    <div class="m-box m-bott" v-for="(item, index) in fications" :key="index.id" >
      <div class="items-full">
            {{item.h2}}
      </div>
      <div class="channel-title">
        <div class="m-list-link" v-for="(item, index) in item.fication" :key="index.id">
          <i :style="item.bg"></i>
          <span>{{item.text}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return{
      fications:[
        {
          h2:"影视-休闲",
          // fication: [],
         fication:[
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem"},
          text:"电视剧"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-0.5rem 0"},
          text:"电影"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-1.5rem 0"},
          text:"纪录片"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-2.5rem -2.5rem"},
          text:"影讯"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-1rem 0"},
          text:"片花"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-2rem 0"},
          text:"网络电影"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "0 -0.5rem"},
          text:"综艺"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-0.5rem -0.5rem"},
          text:"动漫"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-1rem -0.5rem"},
          text:"脱口秀"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-1.5rem -0.5rem"},
          text:"娱乐"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-2rem -0.5rem"},
          text:"搞笑"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-2.5rem -0.5rem"},
          text:"音乐"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "-2rem -2.5rem"},
          text:"艾视直播"
          },
        ]
        },
        {
          h2:"精选·家欢",
         fication:[
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "0 -1rem"},
          text:"游戏"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-1rem -1rem"},
          text:"风云榜"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-1.5rem -1rem"},
          text:"资讯"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-2rem -1rem"},
          text:"原创"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "0 -1.5rem"},
          text:"儿童"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-1rem -1.5rem"},
          text:"知识"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-1.5rem -1.5rem"},
          text:"健康"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-2rem -1.5rem"},
          text:"生活"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-2.5rem -1.5rem"},
          text:"体育"
          },  
        ]
        },
         {
          h2:"其他频道",
         fication:[
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "3rem 3.5rem",backgroundPosition: "0 -2rem"},
          text:"科技"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-0.5rem -2rem"},
          text:"军事"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-1rem -2rem"},
          text:"汽车"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-1.5rem -2rem"},
          text:"财经"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-2rem -2rem"},
          text:"旅游"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-2.5rem -2rem"},
          text:"时尚"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "0 -3rem"},
          text:"演出"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-1rem -2.5rem"},
          text:"广告"
          },
          {bg:{backgroundImage: "url(" + require('../assets/img/flbg.png'),backgroundRepeat: "no-repeat",backgroundSize: "300px 350px",backgroundPosition: "-1.5rem -2.5rem"},
          text:"公益"
          },
        ]
        },
      ],
     
    }
  },

  mounted() {
    // this.$axios.get("/api/fication").then(data => {
    //   var classifyfication = data.data
    //   // console.log(classifyfication);
    //   classifyfication.forEach(item => {
        
    //     item.bg  = JSON.parse(item.bg)
    //     console.log(item.bg.backgroundImage); 
    //     let bg = item.bg.backgroundImage;
    //     for(var i = 0; i <= bg.length; i++) {
    //         bg = 'url(' + require('../assets/' + bg) + ')' ;
    //       // console.log(bg);
    //     }
    //     this.fication = classifyfication;
        // backgroundImage: "url(" + require('../assets/img/flbg.png')
        // var img = JSON.parse(item.bg).backgroundImage;
        // item.bg.forEach(item=>{
        //    console.log(item.bg);
          // item.backgroundImage = require('../assets/' + item.img);
        // })
        // this.fication.fication = img
        // console.log(img);
        // item.img = "url(" + '../assets/' + item.img + ')'
        // // console.log(this.img);
        // item.img = JSON.stringify(item.img)
        
  //     })
  //   })
  }
}

</script>

<style scoped>

/* 搜索栏 */
.header-only {
  box-sizing: border-box;
  height: 0.44rem;
  background: #191919;
  padding: 0.08rem 0 0 0.11rem;
}
.header-onlyleft {
  float: left;
  width: 1.08rem;
  height: 0.26rem;
  background: url(../assets/img/aqy.png) no-repeat;
  background-size: 0.8rem 0.26rem;
}
.header-onlyright {
  float: right;
  color: #b0b0b0;
}
.header-onlyright i {
  display: inline-block;
  width: 0.44rem;
  height: 0.3rem;
  font-size: 0.25rem;
}
.header-onlyright span {
  position: relative;
  top: -0.06rem;
  right: 0.07rem;
  font-size: 0.14rem;
}
/* 分类 */
.m-box {
  
  background-color: #fff;
}
.items-full {
  height: 0.25rem;
  padding-left: .15rem;
  line-height: .25rem;
  background-color: #f7f7f7;
  color: #999;
  font-size: .12rem;
}
.channel-title {
  display: flex;
  flex-wrap: wrap;
} 
.m-list-link {
  box-sizing: border-box;
  width: 33%;
  height: 0.88rem;
  text-align: center;
  margin-top: .11rem;
}
.m-list-link i {
  display: inline-block;
    width: .5rem;
    height: .5rem;
    text-align: center;
}
.m-list-link span {
  display: block;
  line-height: .2rem;
  color: #666;
  font-size:0.12rem;
}
.m-list-link:nth-child(6n-1),
.m-list-link:nth-child(6n),
.m-list-link:nth-child(6n-2){
border-bottom: 0.01rem solid #f7f7f7;
}
.m-bott:last-child {
  margin-bottom: .50rem;
}
</style>